<template>
    <div class="middle" :style="backgroundDiv">
        <el-row class="index-top">
            <el-col :span="2" :offset="20">
                <el-dropdown trigger="click" v-if="user" @command="handleCommand">
                    <span class="el-dropdown-link">
                        {{user.userName}}<i class="el-icon-arrow-down el-icon-right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-close" command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                 <el-button type="primary"  @click="showLogin = !showLogin" v-else>登录</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12" :offset="6">
                <el-carousel :interval="4000" type="card" height="200px">
                    <el-carousel-item v-for="(item,index) in newsListCar" :key="index">
                        <h1 class="medium">{{ item.news_tile }}</h1>
                    </el-carousel-item>
                </el-carousel>
            </el-col>
        </el-row>    
        <!-- 登入框 -->
        <el-dialog 
        title="登录" 
        :visible.sync="showLogin"
        width="30%"
        :before-close="handleClose">
            <el-form :model="loginForm">
                <el-form-item label="手机号" :lable-width="formLabelWidth">
                    <el-input v-model="loginForm.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :lable-width="formLabelWidth">
                    <el-input v-model="loginForm.password" autocomplete="off" show-password></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showLogin = false">取消</el-button>
                <el-button type="primary" @click="checkLogin" :loading="loginLoading">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import {login} from '@/services/user'
import {getNewsByTypeNum} from'@/services/news'
import {mapState} from 'vuex'
import{ mapMutations } from "vuex";
import {setToken} from '@/util/auth'
export default {
    name:'MyIndex',
    data:function(){
        return{
            backgroundDiv:{
                backgroundImage: 'url(' + require('../assets/www.jpg') + ')'
            },
            showLogin:false,
            loginForm:{
                userId:'',
                password:'',
                
            },
            formLabelWidth: '100px',
            loginLoading:false,
            newsListCar:[]
        }
    },
    computed:{
        ...mapState('account',['user']),//扩展运算符。从vuex中的模块account中获取user这个数据
    },
    mounted:function(){
        getNewsByTypeNum({newsTypeId:3,newNum:5}).then(res=>{
            console.log(res.data)
            this.newsListCar = res.data;
        })
    },
    methods: {
        ...mapMutations("account",["setUser","setRoles"]),//用于修改vuex里面的值
        handleClose(done){  
            this.$confirm('确认关闭?')
            .then(_=>{
                done();
            })
            .catch(_=>{});
        },
        checkLogin:function(){
            this.loginLoading=true;
            login(this.loginForm).then(
                res=>{
                    console.log(res)     
                    if(res.success){
                        setToken(res.data.token)
                        this.loginLoading = false;
                        this.showLogin = false;
                        // this.setUser({
                        //     userId: res.data.userId,
                        //     userName:res.data.userName,
                        //     userNo:res.data.userNo
                        // })
                        // this.setRoles(res.data.userRole)
                        this.$router.push({
                            name:'Mine'
                        })
                    }else{
                        this.$message.error(res.err.msg);
                        this.loginLoading = false;
                    }
                }
            ).catch(err=>{
                console.log(err)
            })
        },
        handleCommand:function(command){
            if(command == 'logout'){
                this.$store.dispatch('account/resetToken')
                this.$router.go(0)
            }
        }
    }
}
</script>

<style scoped>
 .index-top{
     background-color:dimgray;
     line-height: 50px;
 }
 .middle {
    height: 100vh;
    width: 100vw;
    background: no-repeat center top;
    background-size: contain;
}

.el-carousel_item h3 {
  color: #475669;
  font-size: 20px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel_item:nth-child(2n) {
  background-color: #2e73d3;
}

.el-carousel_item:nth-child(2n + 1) {
  background-color: #1379e6;
}
 </style>